<template>
  <el-main>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="收房合同号" style="width: 20%;">
        <el-input v-model="form.contractNo" disabled></el-input>
      </el-form-item>
      <el-form-item label="房产信息" style="width: 20%;">
        <el-input v-model="form.houseNames" disabled></el-input>
      </el-form-item>
      <el-form-item label="业主姓名" style="width: 20%;">
        <el-input v-model="form.ownerName" disabled></el-input>
      </el-form-item>
      <el-form-item label="业主手机号" style="width: 20%;">
        <el-input v-model="form.ownerMobile" disabled></el-input>
      </el-form-item>
      <el-form-item label="选择账期">
        <el-select v-model="form.payNumber" placeholder="请选择账期">
          <el-option value="1" label="第一期">第一期</el-option>
          <el-option value="2" label="第二期">第二期</el-option>
          <el-option value="3" label="第三期">第三期</el-option>
          <el-option value="4" label="第四期">第四期</el-option>
          <el-option value="5" label="第五期">第五期</el-option>
          <el-option value="6" label="第六期">第六期</el-option>
          <el-option value="7" label="第七期">第七期</el-option>
          <el-option value="8" label="第八期">第八期</el-option>
          <el-option value="9" label="第九期">第九期</el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="xuan">收房合同查询</el-button>

      <el-form-item v-for="(item,index) in form.typeList" label="新增款项">
        <el-select v-model="item.itemType" placeholder="费用类型">
          <el-option value="1" label="冷水">冷水</el-option>
          <el-option value="2" label="电">电</el-option>
          <el-option value="3" label="燃气/煤气">燃气/煤气</el-option>
          <el-option value="4" label="保洁费">保洁费</el-option>
          <el-option value="5" label="装修费">装修费</el-option>
          <el-option value="6" label="宽带费">宽带费</el-option>
          <el-option value="7" label="卫生费">卫生费</el-option>
          <el-option value="8" label="有线电视费">有线电视费</el-option>
          <el-option value="9" label="其他">其他</el-option>
        </el-select>
        <el-input v-model="item.paymentAmount" placeholder="应付金额" style="width: 20%;"></el-input>
        <el-input v-model="item.realPaymentAmount" placeholder="实付金额" style="width: 20%;"></el-input>
        <el-button @click="del(index)">删除</el-button>
        <el-button @click="addLine">添加</el-button>
      </el-form-item>
      <el-form-item label="是否付款">
        <template>
          <el-radio v-model="form.payState"  value="2" label="1">已付款</el-radio>
          <el-radio v-model="form.payState" value="1" label="2">未付款</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="付款日期" style="width: 20%;" v-if="this.form.payState==1">
        <el-input v-model="form.paidTime" type="date"></el-input>
      </el-form-item>
      <el-form-item label="支付方式" style="width: 20%;" v-if="this.form.payState==1">
        <el-select v-model="form.payMethod" placeholder="费用类型">
          <el-option value="1" label="快捷同">快捷同</el-option>
          <el-option value="2" label="支付宝">支付宝</el-option>
          <el-option value="3" label="微信">微信</el-option>
          <el-option value="4" label="现金">现金</el-option>
          <el-option value="5" label="银行卡转账">银行卡转账</el-option>
          <el-option value="6" label="POS机刷卡">POS机刷卡</el-option>
          <el-option value="7" label="其他">其他</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="支付流水号" style="width: 20%;" v-if="this.form.payState==1">
        <el-input v-model="form.payFlowNo" ></el-input>
      </el-form-item>
      <el-form-item label="合同类型">
        <template>
          <el-radio v-model="form.contractType"  value="1" label="1">收房合同</el-radio>
          <el-radio v-model="form.contractType" value="2" label="2">出房合同</el-radio>
        </template>
      </el-form-item>
      <el-form-item label="备注">
        <el-input  type="textarea" v-model="form.remark" style="width: 40%"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toadd">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="openS">
      <el-form v-model="queryForm">
        <el-form-item>
          小区名称  <el-input label="小区名称" v-model="queryForm.premiseName" style="width: 20%;"></el-input>
          业主姓名  <el-input label="业主姓名" v-model="queryForm.ownerName" style="width: 20%;"></el-input>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
      </el-form>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="houseNames"
            label="房产信息"
            width="180">
          </el-table-column>
          <el-table-column
            prop="consignTime"
            label="签收日期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryForm.pageNo"
          :limit.sync="queryForm.pageSize"
          @pagination="list"
        />
      </template>
    </el-dialog>
  </el-main>
</template>

<script>
  import {saveFuKuanPlan,searchSfAll,toupdate} from "@/api/yingye/yingye";
  export default {
    name: "addfukuan",
    data(){
      return{
        form:{
          contractId:0,
          createUserid:0,
          updateUserid:0,
          businessId:0,
          typeList:[
            {}
          ],
        },
        queryForm:{
          pageSize:10,
          pageNo:1,
          premiseName:'',
          ownerName:''
        },
        openS:false,
        tableData:[],
        total:0,

      }
    },
    created() {
      this.list()
    },
    methods:{
      xuan(){
        this.openS=true
      },
      select(){
        this.list();
      },
      list(){
        searchSfAll(this.queryForm).then(
          response => {
            console.log("shoufang",response)
            this.tableData = response.data.list;
            this.total=response.data.total

          }
        );
      },
      handleEdit(row){
        console.log(row)
        toupdate(row).then(
          response => {
            console.log("toup",response)

            this.form.contractNo=response.data.contractNo
            this.form.houseNames=response.data.houseNames
            this.form.ownerName=response.data.ownerName
            this.form.ownerMobile=response.data.ownerMobile
            this.form.contractId=response.data.id
            this.form.businessId=response.data.businessId
            this.form.createUserid=response.data.createUserid
            this.form.updateUserid=response.data.updateUserid
            this.openS=false
          }
        );
      },
      addLine(){
        this.form.typeList.push({});
      },
      del(index){
        console.log(index);
        this.form.typeList.splice(index,1);
      },

      toadd(){
        saveFuKuanPlan(this.form).then(
          response => {
            console.log("savePay",response)
            if(response){
              this.$message("添加成功")
            }

          }
        );
      },
    }
  }
</script>

<style scoped>

</style>
